<template>
	<view class="content">
		<!-- 导航栏 -->
		<u-navbar :is-back="true" :title="title" :background="background" :title-color="titleColor"></u-navbar>
		<view class="main-container">
			<view>
				<u-form :model="form" ref="uForm">
					<u-form-item label="标题" :label-width="140" prop="comName">
						<u-input v-model="form.comName" />
					</u-form-item>
					<u-form-item label="商品描述" :label-width="140" prop="comDesc">
						<u-input v-model="form.comDesc" type="textarea" :auto-height="true"/>
					</u-form-item>
					<u-form-item label="赏金" :label-width="140" prop="money">
						<u-input v-model="form.money" />
					</u-form-item>
					<u-form-item label="图片" :label-width="140" prop="image">
						<evan-upload
								v-model="form.image"
								ref="eupload" 
								:imgLimit="1"
								:options="uploadOption" 
								:useVideo="false"
								:defaultImageList="imageList"
								:imgFormat="imgFormat"
								@on-success="uploadSuccess"
								@on-error="uploadFail"
								@on-over-list="fnOnUploadOverList"
								@on-upload="fnOnUpload">
						</evan-upload>
					</u-form-item>
					<u-button :custom-style="customStyle" @click="submit">发布</u-button>
				</u-form>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import Vue from 'vue';
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters(['getUserInfo'])
		},
		data() {
			return {
				title: "发布悬赏",
				titleColor: "#330867",
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)'
				},
				uploadOption:{
					url:"http://localhost:8088/common/upload",
					name:"file",
					header:{
						Authorization: "Bearer " + uni.getStorageSync('token')
					},
					formData:{}
				},
				imageList:[],
				imgData:[],
				form: {
					comName:null,
					comDesc:null,
					image:null,
					money:null
				},
				customStyle: {
					backgroundImage: 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#fff'
				},
				rules: {
					comName: [
					    { required: true, message: "标题不能为空", trigger: ['change','blur'] },
					],
					comDesc: [
					    { required: true, message: "商品描述不能为空", trigger: ['change','blur'] },
					],
					money: [
					    { required: true, type: "number", message: "请填写赏金", trigger: ['change','blur'] },
					],
				},
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			showToast() {
					this.$refs.uToast.show({
					title: '发布成功',
					type: 'success'
				})
			},
			// 对返回的数据进行格式化
			imgFormat(dataItem) {
				let fileType = dataItem.fileType.split('"')[0];
				let fileName = JSON.parse(dataItem.thumbnail).fileName;
				return {
					thumbnail: "http://localhost:8088"+fileName,
					url: "http://localhost:8088"+fileName,
					fileType:fileType,
				};
			},
			// 返回超出限制的图片或者视频列表
			fnOnUploadOverList(res){
				
			},
			// 返回图片或者视频上传完成的回调
			fnOnUpload(res){
				// console.log("===============返回图片或者视频上传完成的回调===============");
				// console.log(res)
				this.imgData = []
				for(var i = 0; i<res.data.length; i++){
					// console.log(res.data[i].url.substring(21))
					this.imgData.push(res.data[i].url.substring(21))
				}
				// console.log("===============imgData===============");
				// console.log(this.imgData)
				this.form.image = this.imgData.join(",")
				console.log(this.form.image)
			},
			// 监听完成上传的状态，返回默认的响应内容
			uploadSuccess(res){
				// console.log("===============监听完成上传的状态，返回默认的响应内容===============");
				// console.log(res)
			},
			// 监听上传失败的状态，返回默认的响应内容
			uploadFail(res){
				console.log(res)
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						// console.log("===============表单数据===============");
						console.log(this.form)
						this.form.iuserId = this.getUserInfo.userId
						var that = this;
						Vue.prototype.$u.api.addPriceList(this.form).then(res => {
							if (res.code == "200") {
								that.showToast();
								setTimeout(()=>{
									uni.navigateBack({
									    delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页。
									})
								},2000)
							}else{
								Vue.prototype.$u.toast(res.msg);
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.main-container{
		background-color: #FFFFFF;
		margin: 20rpx;
	}
	.main-container > view {
		padding: 0rpx 18rpx 10rpx 18rpx;
	}
</style>
